import { Chart } from '@antv/g2';

const data = [
  { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  { name: 'London', 月份: 'May', 月均降雨量: 47 },
  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.scale('月均降雨量', {
  nice: true,
});
chart.tooltip({
  shared: true,
  showMarkers: false,
});
chart.legend({
  position: 'top',
  custom: true,
  items: [
    {
      name: 'London',
      id: 'London',
      value: 'name',
      marker: { symbol: 'triangle', style: { r: 4, fill: 'red' } },
    },
    {
      name: 'Berlin',
      id: 'Berlin',
      value: 'name',
    },
  ],
});

chart.on('legend-item:click', (ev) => {
  const target = ev.target;
  const delegateObject = target.get('delegateObject');
  const item = delegateObject.item;

  let showLegend = [];
  for (let i = 0; i < delegateObject.legend.get('items').length; i++) {
    if (!delegateObject.legend.get('items')[i].unchecked) {
      showLegend.push(delegateObject.legend.get('items')[i].id);
    }
  }
  showLegend = [...showLegend];
  chart.filter(item.value, (value) => {
    if (value === undefined) {
      return true;
    } else {
      return showLegend.includes(value);
    }
  });
  chart.changeData(data);
});

chart.interval().position('月份*月均降雨量').color('name').adjust('stack');

chart.interaction('active-region');

chart.render();
